<template>
  <div class="app-container">
    <el-card class="detail-card">
      <el-row :gutter="30">
        <!-- 商品图片 -->
        <el-col :span="12">
          <div class="image-container">
            <el-image :src="goodsDetail.image" fit="contain" />
          </div>
        </el-col>
        <!-- 商品信息 -->
        <el-col :span="12">
          <div class="info-container">
            <h1 class="goods-name">{{ goodsDetail.productName }}</h1>
            <div class="goods-code">商品编号：{{ goodsDetail.productId }}</div>
            <div class="price-container">
              <span class="label">价格：</span>
              <span class="price">¥ {{ goodsDetail.price }}</span>
            </div>
            <div class="stock-container">
              <span class="label">库存：</span>
              <span class="stock">{{ goodsDetail.stock }}</span>
            </div>
            <div class="quantity-container">
              <span class="label">数量：</span>
              <el-input-number v-model="quantity" :min="1" :max="goodsDetail.stock" />
            </div>
            <div class="button-container">
              <el-button type="primary" size="large" @click="handleAddToCart">加入购物车</el-button>
              <el-button type="danger" size="large" @click="handleBuyNow">立即购买</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 商品详情 -->
    <el-card class="detail-info-card">
      <template #header>
        <div class="card-header">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="商品详情" name="detail">
              <div class="detail-content">
                <h3>商品材质</h3>
                <p>{{ goodsDetail.materials }}</p>
                <h3>制作工艺</h3>
                <p>{{ goodsDetail.craft }}</p>
                <h3>非遗元素</h3>
                <p>{{ goodsDetail.ichElements }}</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="非遗文化" name="culture">
              <div class="culture-content">
                <h3>关联非遗</h3>
                <p>{{ goodsDetail.heritageName }}</p>
                <h3>历史背景</h3>
                <p>{{ goodsDetail.heritageHistory }}</p>
                <h3>传承情况</h3>
                <p>{{ goodsDetail.heritageInheritance }}</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup name="GoodsDetail">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const productId = route.params.id;

const goodsDetail = ref({});
const quantity = ref(1);
const activeTab = ref('detail');

/** 获取商品详情 */
function getDetail() {
  // TODO: 调用后端API获取商品详情
}

/** 加入购物车 */
function handleAddToCart() {
  // TODO: 调用后端API添加到购物车
  proxy.$modal.msgSuccess("已加入购物车");
}

/** 立即购买 */
function handleBuyNow() {
  router.push({
    path: '/mall/order/confirm',
    query: {
      productId: productId,
      quantity: quantity.value
    }
  });
}

onMounted(() => {
  getDetail();
});
</script>

<style scoped>
.detail-card {
  margin-bottom: 20px;
}
.image-container {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-container {
  padding: 20px;
}
.goods-name {
  font-size: 24px;
  margin: 0 0 20px 0;
}
.goods-code {
  color: #999;
  margin-bottom: 20px;
}
.price-container {
  margin-bottom: 20px;
}
.label {
  font-size: 16px;
  color: #666;
}
.price {
  font-size: 28px;
  color: #f56c6c;
  font-weight: bold;
}
.stock-container {
  margin-bottom: 20px;
}
.stock {
  font-size: 16px;
  color: #333;
}
.quantity-container {
  margin-bottom: 30px;
}
.button-container {
  display: flex;
  gap: 20px;
}
.detail-info-card {
  margin-bottom: 20px;
}
.detail-content, .culture-content {
  padding: 20px;
}
h3 {
  margin: 20px 0 10px 0;
  color: #333;
}
p {
  color: #666;
  line-height: 1.6;
  margin: 0 0 20px 0;
}
</style> 